How the cascade works
Style sheets can be created in different ways:
- Within an HTML tag (inline style)
- Within the <head> of an HTML document (internal style sheet)
- As an external style sheet (CSS). Even multiple external Style Sheets can be referenced inside a single HTML document.
Dreamweaver automatically creates styles in the <head> unless you create an external style sheet.
Cascading Order
The cascade means an order of priority. This defines what style will be used when there is more than one style for a specific element on the page. The ‘cascade’ is listed below. Number four has the highest priority:
- Browser default
- External Style Sheet
- Internal Style Sheet
- Inline Style
So, an inline style (as an attribute of an HTML element) has the highest priority, which means that it will override a style declared for the same element in the <head> (internal), in an external style sheet, and from the browser (browser default).
To illustrate this, let us consider formatting properties for the default font of a web page.
- If no style is specified then the browser default is used.
- If a style for the default font is specified in an external style sheet then all web pages linked to that style sheet will use that style.
- If, in one of those web pages a different default font is required then the style can be specified in an internal style sheet within the head tag. This will override the style defined in the external style sheet.
- Finally, an inline style for the default font will override an internal style sheet.*
*Generally, inline styles are an inefficient use of styles. Their use is mostly appropriate for HTML emails.